<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  body {
  -webkit-user-select: none;
}

.sloth {
	margin: 0 auto;
	width: 247px;
	height: 194px;
	background: url(../images/sloth.png) no-repeat;
  background-size: 400%;
  background-position-y: -970px;
}

.info {
	margin: 0 auto;
	width: 247px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	text-indent: .5em;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
}

.btn_wrap {
	position: relative;
	margin: 15px auto 0;
	width: 246px;
	height: 246px;
	border: 1px solid #ECECEC;
	-webkit-box-sizing: border-box;
	-webkit-border-radius: 50%;
}

.btn_mask, .force_btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 146px;
	height: 146px;
	margin-left: -73px;
	margin-top: -73px;
	-webkit-box-sizing: border-box;
	-webkit-border-radius:50%;
}

.btn_mask {
	background: rgba(51, 122, 183, 0.5);
}

.force_btn {
	padding: 0;
	background: #337ab7 url() no-repeat center center;
	background-size: 80px;
}
  </style>
</head>
<body>
  <div class="sloth" id="sloth"></div>
  <p class="info">Force:
    <span id="force_val">0</span>
  </p>
  <div class="btn_wrap">
    <div class="btn_mask" id="btn_mask"</div>
    <div class="force_btn" id="force_btn"></div>
  </div>
  <script>
  const forceBtn = document.querySelector('#force_btn');
  const forceValSpan = document.querySelector('#force_val');
 forceBtn.addEventListener('touchend',() => {
	 forceValSpan.innerHTML= 0;
	 update(0);
 })

  forceBtn.addEventListener('touchforcechange', (event) => {
	forceValSpan.innerHTML = evevt.touch[0].force;
	update(force);
  })
  forceBtn.addEventListener('touchstart', (event) => {
	// forceValSpan.innerHTML = 1;
	// alert(navigator.userAgent.toLowerCase())
	if(navigator.userAgent.toLowerCase().indexOf('iphone')==-1)
	{
		forceValSpan.innerHTML = 1;
	}
  })
  function update(force){
	//   mask scale
	// 换图片、
	//值
	let scale = 1 +Math.ceil(force*100)/146;
	forceValSpan.innerHTML = force;
	document.getElementById('btn-mask')
	.style
	.webkitTransform = 'scale("+ scale +")'
  }
  </script>
</body>
</html>
